<template>
	<view class="confirm"  v-if="allData.selDoctorData.doctorName?allData.selDoctorData.doctorName.length:0">
		<view class="type">
			<view class="iconfont icon-wancheng"></view>
			<view class="success">预约成功</view>
		</view>
		<view class="confirmBox">
			<image src="../../../static/images/index.png" mode=""></image>
			<view>
				{{allData.selDoctorData.doctorName}}
				<text>{{allData.selDoctorData.title}}</text>
			</view>
		</view>
		<view>
			<view class="detailBox">
				<view class="title">就诊医院</view>
				<view class="detail">华西医院</view>
			</view>
			<view class="detailBox">
				<view class="title">医院地址</view>
				<view class="detail">{{allData.selRoomData.hospitalParkName}}{{allData.selRoomData.bigName}}{{ allData.selRoomData.depAddress }}</view><text @click="goMapNavigation" class="iconfont icon-daohang-"></text>
			</view>
			<view class="detailBox">
				<view class="title">就诊科室</view>
				<view class="detail">{{allData.selRoomData.hospitalParkName}}-{{ allData.selRoomData.departmentName }}</view>
			</view>
			<view class="detailBox">
				<view class="title">门诊时间</view>
				<view class="detail">{{ allData.selDoctorData.workDate }} {{ allData.selDateData.time }}</view>
			</view>
			<view class="detailBox">
				<view class="title">候诊时间</view>
				<view class="detail">{{ allData.selDateData.time }}</view>
			</view>
			<view class="detailBox">
				<view class="title">费用</view>
				<view class="detail">￥{{ allData.selDoctorData.fee }}(就诊时支付)</view>
			</view>
			<view class="detailBox">
				<view class="title">就诊人</view>
				<view class="detail">{{ allData.selPersonData.name }}</view>
			</view>
			<view class="detailBox">
				<view class="title">身份证号</view>
				<view class="detail">{{ allData.selPersonData.cardNum }}</view>
			</view>
			<button @click="cancelOpen" class="btn">取消预约</button>
			<uni-popup ref="cancel" type="dialog">
				<uni-popup-dialog
					mode="base"
					content="确定取消此次预约吗？确定后将在三秒后返回首页"
					:duration="2000"
					:before-close="true"
					@close="close"
					@confirm="confirm"
				></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
	<view v-else class="error">
		<image src="../../../static/images/err.jpg"></image>
		<view>暂无预约</view>
	</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import {selPersonStore} from '@/store/appReStore.js'
const allData = selPersonStore();
let cancel = ref(null)
// 点击取消按钮
let cancelOpen = () => {
	cancel.value.open('warn')
}
let close = () => {
	cancel.value.close('warn')
}

let confirm = value => {
	uni.navigateTo({
		url: '/pages/allRecord/cancel/cancel'
	})
	cancel.value.close('warn')
}
// 跳转到地图导航
let goMapNavigation = () => {
	uni.navigateTo({
		url: '/pages/nucleicAcidTesting/mapNavigation/mapNavigation'
	})
}
</script>
<style scoped="" lang="less">
	.error{
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		image{
			height: 350px;
		}
		view{
			font-size: 40px;
			font-weight: 700;
			color: #717677;
		}
	}
.confirm {
	width: 694rpx;
	border: 1px #f4f4f4 solid;
	margin: 24rpx;

	.type {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.icon-wancheng {
			font-size: 98rpx;
			margin: 24rpx 0;
			color: #006eff;
		}

		.success {
			font-size: 38rpx;
		}
	}

	.confirmBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 628rpx;
		border-bottom: 1px solid #dcdcdd;
		margin: 0 30rpx;
		padding: 34rpx 0;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 4rpx;
		}

		view {
			color: #5c645b;
			font-size: 30rpx;
			margin-left: 26rpx;

			text {
				color: #717677;
				font-size: 26rpx;
				margin-left: 14rpx;
			}
		}
	}

	.detailBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: ;
		width: 628rpx;
		border-bottom: 1px solid #dcdcdd;
		margin: 0 30rpx;
		padding: 36rpx 0;

		.title {
			width: 120rpx;
			height: 34rpx;
			font-size: 28rpx;
			color: #cbbdbf;
			text-align: justify;
			text-align-last: justify;
		}

		.detail {
			color: #6e726e;
			font-size: 28rpx;
			margin-left: 20rpx;
		}

		.active {
			color: #f4636f;
		}

		.iconfont {
			margin-left: 34rpx;
			color: #1f80ff;
			font-weight: 700;
		}
	}

	.btn {
		width: 690rpx;
		height: 70rpx;
		color: #006eff;
		font-size: 36rpx;
		background-color: #e4f0ff;
		line-height: 70rpx;
		text-align: center;
		margin-bottom: 30rpx;
		margin-top: 30px;
	}
}
</style>
